<template>
  <div class="app-page">
    <table-search
      :search-form="queryFormItem"
      :on-submit="handleQuery"
      :on-reset="handleQuery"
    >
      <div slot="new-add-button" style="line-height:45px;">
        <el-button
          type="primary"
          size="small"
          icon="el-icon-plus"
          @click="handleAdd"
        >
          添加
        </el-button>
      </div>
    </table-search>
    <el-card class="table">
      <TablePaging
        :table-list="deviceList"
        border
        :table-column="deviceTableColumn"
        :table-buttons="deviceTableButtons"
        :table-btn-width="180"
        :table-paging="deviceTablePaging"
        :table-total="deviceTableTotal"
        @pagingChange="handlePaginChange"
      />
    </el-card>
    <device-update
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      :before-close="() => (dialogVisible = false)"
      :handle-submit="handleModalSubmit"
      :form-data="modalFormData"
      :device-code-disabled="deviceCodeDisabled"
      width="620px"
    />
  </div>
</template>

<script>
import {
  libFindPage,
  libDepartAdd,
  fetchDepartGet,
  fetchDepartUpdate,
  fetchDepartDelete,
  fetchDepartDropdownList,
  fetchCheckDeptUpdateStatus
} from '@/api/indicatorlib/department'
import { TableSearch, TablePaging } from '@/components'
import DeviceUpdate from './update'
import { queryFormItem, tableColumn } from './config'

export default {
  name: 'Device',
  components: { TableSearch, TablePaging, DeviceUpdate },
  data() {
    return {
      queryFormData: {},
      queryFormItem,
      deviceTableColumn: tableColumn(1, 10),
      deviceList: [],
      deviceTableButtons: [
        // 考核table操作按钮
        {
          name: '修改',
          click: this.handleEdit
        },
        {
          name: scope => (scope.row.status === 1 ? '停用' : '启用'),
          authKey: 'b_1_4',
          click: (id, row) =>
            this.handleUpdateStatus(id, row.status === 1 ? 2 : 1)
        },
        {
          name: '删除',
          click: this.handleDelete
        }
      ],

      deviceTableTotal: 0,
      deviceTablePaging: {
        page: 1,
        pagesize: 10
      },
      dialogTitle: '添加', // 弹窗标题
      dialogVisible: false, // 弹窗显示隐藏
      modalFormData: {}, // 弹窗表单数据
      deviceCodeDisabled: false // 设备号是否禁止修改
    }
  },
  mounted() {
    this.postFindPage()
    this.postDeptSearchList()
  },
  methods: {
    // 获取查询部门下拉
    postDeptSearchList() {
      fetchDepartDropdownList({}).then(res => {
        this.queryFormItem[0].options = res.map(e => ({
          key: e.id,
          value: e.name
        }))
      })
    },
    handleQuery(values) {
      // 查询点击
      this.queryFormData = values
      this.deviceTablePaging = {
        page: 1,
        pagesize: 10
      }
      this.postFindPage()
    },
    handleUpdateStatus(id, status) {
      // 更新状态
      this.postUpdateStatus(id, status)
    },
    handleAdd() {
      // 新增
      this._setModalData()
    },

    handleEdit(id) {
      // 修改
      fetchDepartGet({ id }).then(res => {
        this._setModalData('修改', true, res)
      })
    },

    handleDelete(id) {
      this.$confirm('是否删除此考核部门?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.postDepartDelete(id)
        })
        .catch(() => {})
    },

    handleModalSubmit(values) {
      // 弹窗表单提交
      if (values.id) {
        this.postDepartUpdate(values)
        return false
      }
      this.postDepartAdd(values)
    },

    handlePaginChange(pageInfo) {
      // 分页改变
      this.deviceTablePaging = pageInfo
      this.postFindPage()
      const { page, pagesize } = pageInfo
      this.deviceTableColumn = tableColumn(page, pagesize)
    },

    _setModalData(title = '添加', visible = true, formData = {}) {
      // 设置弹窗
      this.modalFormData = formData
      this.dialogTitle = title
      this.dialogVisible = visible
      this.deviceCodeDisabled = title !== '添加'
    },
    postFindPage() {
      // 获取列表
      libFindPage({
        ...this.queryFormData,
        ...this.deviceTablePaging
      }).then(res => {
        const { records, current, size, total } = res
        this.deviceList = records
        this.deviceTablePaging = {
          page: current,
          pagesize: size
        }
        this.deviceTableTotal = total
      })
    },
    postDepartAdd(values) {
      // 指标库新增
      libDepartAdd(values).then(res => {
        this.dialogVisible = false
        this.$message({
          type: 'success',
          message: '添加成功'
        })
        this.postFindPage()
      })
    },
    postUpdateStatus(id, status) {
      // 更新状态
      console.log(status)
      fetchCheckDeptUpdateStatus({ id, status }).then(() => {
        this.$message.success('操作成功')
        this.postFindPage()
      })
    },
    postDepartUpdate(values) {
      // 考核部门更新
      fetchDepartUpdate(values).then(() => {
        this.dialogVisible = false
        this.$message({
          type: 'success',
          message: '修改成功'
        })
        this.postFindPage()
      })
    },

    postDepartDelete(id) {
      // 考核部门删除
      fetchDepartDelete({ id }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        this.postFindPage()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.app-page {
  min-height: 0;
}
.table {
  margin-top: 16px;
  min-height: 100vh;
}
</style>
